<template>
	<div class="regist">
		<el-card class="box-card">
			<div slot="header" class="clearfix"><span style="color: #FEC418;font-size: 20px;">用户注册</span></div>
			<div class="box-centent">
				<el-form ref="userform" :rules="rules" :model="userinfo" label-width="75px">
					<el-form-item label="管理员" prop="adminName"><el-input v-model="userinfo.adminName"></el-input></el-form-item>
					<el-form-item label="密码" prop="password"><el-input v-model="userinfo.password"></el-input></el-form-item>
					<el-form-item label="注册名" prop="registerName"><el-input v-model="userinfo.registerName"></el-input></el-form-item>
					<div style="display: flex;flex-direction: row;">
						<el-form-item label="省份" prop="provinceId">
							<el-select v-model="userinfo.provinceId" @change="provinceChanged" placeholder="请选择省份">
								<el-option v-for="(province, index) in provinces" :key="province.Id" :label="province.Name" :value="province.Id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="城市" prop="cityId">
							<el-select v-model="userinfo.cityId" placeholder="请选择城市">
								<el-option v-for="(city, index) in cities" :key="city.Id" :label="city.Name" :value="city.Id"></el-option>
							</el-select>
						</el-form-item>
					</div>
					<el-form-item>
						<el-button type="primary" style="float: left; width: 40%;" @click="registClick">立即注册</el-button>
						<el-button style="float: right; width: 40%;" @click="loginClick">用户登录</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
	</div>
</template>

<script>
export default {
	data() {
		return {
			userinfo: {
				adminName: '',
				password: '',
				registerName: '',
				provinceId: '',
				cityId: ''
			},
			rules: {
				adminName: [{ required: true, message: '请输入管理员', trigger: 'blur' }, { min: 3, max: 16, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 3, max: 6, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
				registerName: [{ required: true, message: '请输入注册名', trigger: 'blur' }, { min: 7, max: 16, message: '长度在 7 到 9 个字符', trigger: 'blur' }],
				provinceId: [{ required: true, message: '请选择省份', trigger: 'blur' }, { min: 3, max: 16, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
				cityId: [{ required: true, message: '请选择城市', trigger: 'blur' }, { min: 3, max: 16, message: '长度在 3 到 5 个字符', trigger: 'blur' }]
			},
			provinces: [],
			cities: []
		};
	},
	created() {
		this.$nextTick(function() {
			this.getProvinces();
		});
	},
	methods: {
		registClick() {
			this.$refs['userform'].validate(async valid => {
				if (valid) {
					const res = await this.$https.postXform('Register?adminName=' + this.userinfo.adminName + '&password=' 
						+ this.userinfo.password + '&registerName=' + this.userinfo.registerName
						+ "&provinceId=" + this.userinfo.provinceId + "&cityId=" + this.userinfo.cityId
					);
					if (res.data === 'success') {
						this.$msg.success('注册成功！');
						this.$router.push('/login');
					} else {
						this.$msg.error('注册失败！');
					}
				} else {
					return false;
				}
			});
		},
		loginClick() {
			this.$router.push('/login');
		},
		async getProvinces() {
			const res = await this.$https.postJson('GetProvince');
			this.provinces = res.data.Data;
		},
		async getCities(id) {
			const res = await this.$https.postXform('GetCities?provinceId=' + id);
			this.cities = res.data.Data;
		},
		provinceChanged(val) {
			this.getCities(val);
		}
	}
};
</script>

<style scoped="scoped">
.regist {
	position: fixed;
	width: 100%;
	height: 100%;
	display: inline-block;
	text-align: center;
	align-items: center;
	background-repeat: no-repeat;
	background-size: cover;
	background: url(../assets/back.jpg);
}
.box-card {
	display: inline-block;
	width: 480px;
	margin: 0 auto;
	margin-top: 5%;
}
.box-centent {
}
</style>
